<script setup lang="ts"></script>

<template>
  <div class="home-container">
    <h2 class="page-title">后台首页</h2>
    <p class="welcome-text">欢迎回来！在这里您可以管理您的网站内容。</p>
    <el-divider />
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card shadow="hover" class="info-card">
          <el-statistic title="今日访客" :value="1234" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card shadow="hover" class="info-card">
          <el-statistic title="文章总数" :value="56" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card shadow="hover" class="info-card">
          <el-statistic title="联系方式" :value="'BigYangModest'" group-separator="">
            <template #suffix> 🐧 </template>
          </el-statistic>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 8px 0;
}
.welcome-text {
  font-size: 1rem;
  color: #6c757d;
  margin-bottom: 20px;
}
.info-card {
  border: none;
  background-color: #f8f9fa;
}
</style>
